<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <!-- 访问mCount模块里的count数据 -->
    <!-- 唯一不一样的是访问state里的数据要指定模块名 -->
    <p>count 值：{{ count }}</p>
    <p>总价：{{ $store.getters['mOrders/total'] }}</p>
    <p>总价：{{ total }}</p>

    <!-- 默认情况下调用modules里的所有函数，还是跟以前一样 -->
    <!-- 它会从根vuex开始依次把所有的add都调用 -->
    <!-- 如果子模块开启了命名空间，那么直接写add就代表调用根vuex里的add了，其他的就不会调用 -->
    <button @click="$store.commit('add')" class="btn btn-primary">+1</button>
    <!-- <button @click="$store.commit('ct/add')" class="btn btn-primary">mCount+1</button> -->
    <button @click="add" class="btn btn-primary">映射的add</button>
    <button @click="rootAdd" class="btn btn-primary">映射的根add</button>
    <button @click="$store.commit('mOrders/add')" class="btn btn-primary">mOrders+1</button>
    
    <!-- 能不能调用成功？会调用根vuex里的asyncAdd -->
    <button @click="$store.dispatch('ct/asyncAdd', 101)" class="btn btn-primary">actions</button>
    <button @click="asyncAdd(101)" class="btn btn-primary">actions</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Left',
  methods: {
    // 如果映射时不指定模块名
    // 那么找的都是根vuex
    ...mapMutations('ct', ['add']),

    // 我既映射根里的add，也想映射ct模块里的add
    // 怎么办？
    // 把根vuex里的add，改名为 rootAdd
    ...mapMutations({rootAdd: 'add'}),

    // 映射ct模块里的asyncAdd到这个组件里，让它可以通过
    // asyncAdd来直接调用
    ...mapActions('ct', ['asyncAdd'])
  },
  computed: {
    // 默认是找根vuex里的total
    // 所以要指定模块
    ...mapGetters('mOrders', ['total']),
    // count () {
    //   return this.$store.state.mCount.count
    // }
    // 也要指定模块
    // 参数1：模块名
    // 参数2：数组或对象
    ...mapState('ct', ['count'])
  }
}
</script>

<style>
</style>
